import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'


class AdvicePerformHome extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault backBtnOnPress={navigation.goBack} title="医嘱执行"
        rihghtBtnOnPress={() => {
          navigation.state.params.clickRightMethod()
        }}
        rightImg={require('./src/lishizhangdan.png')}
        flag={true}
      />
    )
  })


  componentDidMount() {
    this.props.navigation.setParams({
      clickRightMethod: () => {

        this.props.navigation.navigate('PerformHistorys')

      }
    })
  }



  _ItemSection({ tietle }) {
    let iconPath
    switch (tietle) {
      case '已过期':
        iconPath = require('./src/guoqi.png')
        break

      case '口服药':
        iconPath = require('./src/koufuyao.png')
        break

      case '输液':
        iconPath = require('./src/shuye.png')
        break

      default:
        iconPath = require('./src/shuye.png')
        break
    }
    return (
      <TouchableOpacity
        onPress={() => {
          if (tietle === '口服药') {
            // this.props.navigation.navigate('OralMedicine')

            this.props.navigation.navigate('MyPatients', {
              tittle: '口服药'
            })
          } else if (tietle === '输液') {
            this.props.navigation.navigate('Infusion')
          }
        }}
      >
        <View
          style={{
            width: screenWidth,
            backgroundColor: 'white',
            height: 80,
            borderBottomColor: '#efefef',
            borderBottomWidth: 1,
            paddingLeft: 15,
            flexDirection: 'row',
            alignItems: 'center'
          }}
        >
          <Image
            style={{ width: 60, height: 60 }}
            resizeMode="stretch"
            source={iconPath}
          />
          <Text>{tietle}</Text>
          <View style={{ flex: 1 }} />
          <Image
            resizeMode="contain"
            style={{ width: 40, height: 30 }}
            source={require('./src/iconfontjiantou5.png')}
          />
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this._ItemSection({ tietle: '已过期' })}
        {this._ItemSection({ tietle: '口服药' })}
        {this._ItemSection({ tietle: '输液' })}
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  }
})

function select(store) {
  return {}
}

export default connect(select)(AdvicePerformHome)
